<template>
  <view class="study_item">
    <view class="item_left">
      <view class="title">{{ itemObj.title }}</view>
      <view class="type">
        <text
          v-if="itemObj.Type == '视频学习'"
          :style="itemObj.Type == '视频学习' ? 'color: #3B95FF' : ''"
          >{{ itemObj.Type }}</text
        >
        <text
          v-if="itemObj.Type == '文档资料'"
          :style="itemObj.Type == '文档资料' ? 'color: #51BB88' : ''"
          >{{ itemObj.Type }}</text
        >
        <text
          v-if="itemObj.Type == '电子图书'"
          :style="itemObj.Type == '电子图书' ? 'color: #FFBC3B' : ''"
          >{{ itemObj.Type }}</text
        >
        <text
          v-if="itemObj.Type == '专题学习'"
          :style="itemObj.Type == '专题学习' ? 'color: #E86565' : ''"
          >{{ itemObj.Type }}</text
        >
        <text
          v-if="itemObj.Type == '学习心得'"
          :style="itemObj.Type == '学习心得' ? 'color: #51BB88' : ''"
          >{{ itemObj.Type }}</text
        >
      </view>
    </view>
    <view class="createTime">{{ itemObj.createTime }}</view>
  </view>
</template>

<script>
export default {
  props: {
    itemObj: {
      type: Object,
      default: {},
    },
    // 判断是不是草稿箱列表
    // isDrafts: {
    // 	type: Boolean,
    // 	default: false
    // },
  },
  data() {
    return {
      seriesCoverUrl: [],
      imgSrc: "../../static/dangjian/no-pic.png",
    };
  },
  created() {
    console.log(this.itemObj.seriesCoverUrl);

    if (
      this.itemObj.seriesCoverUrl &&
      JSON.parse(this.itemObj.seriesCoverUrl).length
    ) {
      this.seriesCoverUrl = JSON.parse(this.itemObj.seriesCoverUrl);
    } else {
      this.seriesCoverUrl = [this.imgSrc];
    }
    console.log(this.seriesCoverUrl);
  },
  methods: {},
};
</script>

<style>
.createTime {
  width: 100%;
  font-size: 24rpx;
  color: #666666;
  line-height: 28rpx;
  margin-top: 30rpx;
}
.study_item {
  width: 710rpx;
  height: 188rpx;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 0;
  box-sizing: border-box;
}

.item_left {
  flex: 5;
  height: 100%;
  font-size: 36rpx;
  font-weight: 500;
  color: #000000;
  flex: 2.4;
  margin-right: 20rpx;
  display: flex;
  flex-wrap: wrap;
}
.createTime {
  flex: 1;
}

.title {
  width: 90%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}

.type {
  font-size: 28rpx;
}

.item_right {
  flex: 1;
  height: 100%;
}

.right_item {
  position: relative;
}

.right_item .icon-shipin {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: #fff;
  font-size: 55rpx;
}

.item_right image {
  width: 200rpx;
  height: 132rpx;
  border-radius: 8rpx;
}
</style>
